<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item :index="item.to" v-for="item in options" :key="item.to">
      <i :class="item.icon"></i>
      <span slot="title">{{item.name}}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import Vue from 'vue'
import {
  Menu,
  MenuItem
} from 'element-ui'

Vue.use(Menu)
Vue.use(MenuItem)

export default {
  data () {
    return {}
  },
  computed: {
    options () {
      return this.$store.state.nav.options
    },
    activeIndex: {
      get () {
        console.log(this.$store.state.tabs.activeIndex)
        return this.$store.state.tabs.activeIndex
      },
      set (val) {
        this.$store.commit('setActiveIndex', val)
      }
    }
  },
  methods: {}
}
</script>
